import React from "react";
import {ProjectListScreen} from "./screens/projectList";
import {useAuth} from "./context/authContext";
import styled from "@emotion/styled";
import {Button, Dropdown, Menu} from "antd";
import {ReactComponent as Dog} from 'asset/yegou.svg';


export const AuthenticatedApp = () => {
    const {logout, user} = useAuth()
    const menu = (
        <Menu>
            <Menu.Item key={1}>查看用户信息</Menu.Item>
            <Menu.Item key={3}>Call他</Menu.Item>
            <Menu.Item key={2}><Button type={"link"} onClick={logout}>退出</Button></Menu.Item>
        </Menu>
    )
    return <Container>
        <Header>
            <HeaderLeft>
                <Dog color={'rgb(28,132,255)'}/>
                <h3>项目</h3>
                <h3>用户</h3>
            </HeaderLeft>
            <HeaderRight>
                <Dropdown overlay={menu}>
                    <Button type={"link"} onClick={e => {
                        e.preventDefault()
                    }}>hi,{user?.name}</Button>
                </Dropdown>

            </HeaderRight>
        </Header>
        <ProjectListScreen/>
    </Container>
};

const Container = styled.div`
  display: grid;
  grid-template-rows: 6rem 1fr 6rem;
  height: 100vh;
`
const Header = styled.header`
  display: flex;
  align-items: center;
  flex-direction: row;
  padding: 3.2rem;
  box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
  z-index: 1;
  justify-content: space-between;`

const HeaderLeft = styled.div`
  display: flex;
  align-items: center;
  flex-direction: row;
  > * {
    margin-right: 2rem;
    margin-top: 0!important;
    margin-bottom: 0!important;
  }`

const HeaderRight = styled.div``

